<template>
  <div id="baoyou">
    <!--top-header-->
    <top-header></top-header>
    <!--logo and search-->
    <div style="clear: left" class="logoAndSearch">
      <logo-search></logo-search>
    </div>
    <!--nav-->
    <h-nav :activeIndex="activeIndex"></h-nav>
  <!--container-->
    <div class="container maxWidth">
      <div v-show="false" ref="typeBox" class="typeBoxBox" >
        <div  class="type_box clearfix maxWidth">
          <div class="type_list_box fl" :class="{'type_fixed':showFixed}">
            <ul class="type_list clearfix">
              <li class="fl" @click="listClick(index)" :class="{'active':currentIndex==index}" :key="index" v-for="(item,index) in topNavList" >
                <a href="javascript:void (0)">{{item.name}} <span v-show="false">({{item.count}})</span></a>
              </li>
              <div class="bottom_line" ref="bottomLine"></div>
            </ul>
          </div>
          <span v-show="!showFixed && false" class="jkj_number fr">今日上新 <span class="color_red">291</span> 条</span>
          <div v-show="!showFixed" class="type_line"></div>
        </div>
      </div>

      <div class="">
          <div @click="titleClick(item.rank)" class="nav_item" v-for="(item,index) in navShopList">{{item.name}}</div>
      </div>

      <div class="youhuquan_list_box flex-list">
        <list-item :item="item" :key="index"  v-for="(item,index) in couponListData"></list-item>
      </div>
    </div>

    <!--footer-->
    <v-footer></v-footer>
  </div>
</template>
<script>
  import TopHeader from 'src/components/common/topHeader.vue'
  import HNav from 'src/components/common/nav.vue'
  import LogoSearch from 'src/components/common/logoSearch.vue'
  import VFooter from 'src/components/common/footer.vue'
  import ListItem from 'src/components/common/ListItem.vue'
  import {URI_SHZRANKS} from 'src/const/uri'
  export default {
    components: {HNav, TopHeader, LogoSearch, VFooter,ListItem},
    data() {
      return {
        activeIndex: 3,
        currentIndex:0,
        rank:'real',
        topNavList:[
          {title:'全部',count:1647},
          {title:'居家',count:689},
          {title:'食品',count:280},
          {title:'服饰',count:30},
          {title:'美妆',count:188},
          {title:'母婴',count:184},
          {title:'数码',count:268},
        ],
        navShopList:[{name:'实时销量榜',textColor:'#e23357', desc:'超值好货', pic:'/static/img/9.9/9.9.png',rank:'real'},
          {name:'周榜',textColor:'#a2dd7a', desc:'优质行货', pic:'/static/img/9.9/19.9.png',rank:'week'},
          {name:'推广榜',textColor:'#ee931c', desc:'品质良选', pic:'/static/img/9.9/29.9.png',rank:'spread'}
        ],
        showFixed:false,

        reqPage:1,
        reqPageSize:40,
        couponListData:[],

        sw:true,
      }
    },
    created(){
      this.initListData();
    },
    mounted() {
      let typeBoxOffsetTop=this.$refs.typeBox.offsetTop;
      window.addEventListener('scroll',()=>{
       // console.log(document.documentElement.scrollTop);
        if(document.documentElement.scrollTop>=typeBoxOffsetTop){
          this.showFixed=true;
        }else{
          this.showFixed=false;
        }
      })
    },
    methods: {
      initListData(){
        this.$ajax.get(URI_SHZRANKS,{
          rank:this.rank,
          promotionTypeId:1,
        },(res)=>{
          console.log(res);
          this.couponListData=this.couponListData.concat(res.data.data);
          this.sw = true;
          if (res.data.data.length < 40) {
            //说明没数据了
            this.sw=false;
          };
        });
      },
      titleClick(rank){
        this.rank=rank;
        this.couponListData=[];
        this.initListData();
      },
      listClick(index) {
        this.currentIndex = index;
        this.$refs.bottomLine.style.transition='all 300ms'
        this.$refs.bottomLine.style.transform=`translateX(${(100*index)}px) scale(1) translateZ(0px)`;
        this.couponListData=[];
        this.initListData();
      }
    }

  }
</script>
<style lang="less" scoped>
  @import "baoyou";
</style>
